<template>
	<div class="app-container">
		<!-- 高级查询 -->
		<div class="filter_container">
			<el-tabs v-model="queryParams.locationType" type="card" @tab-click="handleQuery">
				<el-tab-pane name="轻型物品区">
					<span slot="label"><i class="el-icon-s-order" />轻型物品区</span>
				</el-tab-pane>
				<el-tab-pane name="普通物品区">
					<span slot="label"><i class="el-icon-bank-card" />普通物品区</span>
				</el-tab-pane>
				<el-tab-pane name="贵重物品区">
					<span slot="label"><i class="el-icon-bank-card" />贵重物品区</span>
				</el-tab-pane>
				<el-tab-pane name="重型物品区">
					<span slot="label"><i class="el-icon-bank-card" />重型物品区</span>
				</el-tab-pane>
				<el-tab-pane name="超规物品区">
					<span slot="label"><i class="el-icon-bank-card" />超规物品区</span>
				</el-tab-pane>
			</el-tabs>
		</div>
		<el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
			<!-- <el-form-item label=":">
        <el-input v-model="queryParams.warehouseCode" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
 -->
			   <el-form-item label="库位号">
        <el-input v-model="queryParams.locationNo" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
		<!-- 	<el-form-item label="区">
				<el-input v-model="queryParams.areaAndRow" size="small" placeholder="请输入" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item> -->
			<!--  <el-form-item label="区排:">
        <el-input v-model="queryParams.areaAndRow" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="区排节:">
         <el-input v-model="queryParams.areaRowTier" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="层格:">
          <el-input v-model="queryParams.tierBin" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
      <el-form-item label="节:">
        <el-input v-model="queryParams.bay" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
			<el-form-item label="节">
				<el-input v-model="queryParams.bay" size="small" placeholder="请输入" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="层">
				<el-input v-model="queryParams.tier" size="small" placeholder="请输入" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="格">
				<el-input v-model="queryParams.bin" size="small" placeholder="请输入" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>

			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				<el-button v-hasPermission="['web:tbWmsLocation:insert']" type="info" icon="el-icon-upload2" size="mini"
					@click="openUploadDialog">批量导入库位</el-button>
			</el-form-item>
		</el-form>

		<!-- 工具栏 -->


		<!-- 数据列表 -->
		<div class="container" style="display:flex;">
			<el-card class="box-card" style="width:55%;margin: 10px 10px">
				<div slot="header" class="clearfix">
					<span>{{queryParams.locationType}}</span>

				</div>

				<el-row :gutter="20">
					<el-col style="margin: 10px 30px 10px 40px"  v-for="item in page.records" :span="5">
						<div @click="getTableData(item.locationNo,item.locationName)">
							<el-card class="box-card3" shadow="hover">
								<div slot="header" style="text-align: center;" class="clearfix">
									<span>{{item.areaAndRow}}排-{{item.bay}}节-{{item.tier}}层-{{item.bin}}格</span>
								</div>
								<div slot="header" style="text-align: center;" class="clearfix">
									<span>{{item.locationName}}</span>
								</div>

								<div class="fontSize">已装：{{item.currentLoad}}KG</div>
								<div class="fontSize">限重：{{item.maxLoad}}KG</div>
								<el-progress :color="customColors" class="progress" :percentage="percentage">
								</el-progress>

							</el-card>
						</div>
					</el-col>
				</el-row>
				<pagination v-show="page.total>0" :total="page.total" :page.sync="page.current"
					:limit.sync="page.pageSize" @pagination="handleQuery" />

			</el-card>
			<el-card class="box-card1" style="width:45%;margin: 10px 10px">
				<div slot="header" class="clearfix">
					<span style="margin: 0 auto;">{{clearlyTitle}}--库存详情</span>
				</div>
				<!-- <el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
						<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleProcessCheck">盘点
						</el-button>
					</el-col>
				</el-row> -->
				<el-table :data="tableData" height="80vh" border stripe style="width: 100%">
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column label="序号" align="center" type="index" />
					<el-table-column prop="materialName" align="center" label="物品名称"></el-table-column>
					<el-table-column prop="materialNo" align="center" label="物品编号">
					</el-table-column>
					<!--  <el-table-column prop="rfid" label="标签号">
        </el-table-column> -->
					<!-- <el-table-column align="center" prop="rfid" label="RFID标签">
						<template slot-scope="scope">
							<el-input v-model="scope.row.rfid" size="small" placeholder="标签号" clearable />
						</template>
					</el-table-column> -->
					<el-table-column prop="caseNo" align="center" label="业务编号">
					</el-table-column>
					<el-table-column prop="caseName" align="center" label="业务名称">
					</el-table-column>
					<el-table-column prop="quantity" align="center" label="数量">
					</el-table-column>
					<el-table-column prop="unitName" align="center" label="计量单位">
					</el-table-column>
					<!-- <el-table-column prop="count" label="盘点数量">
							<template slot-scope="scope">
								<el-input v-model="scope.row.count" size="small" placeholder="盘点数量" clearable />
							</template>
						</el-table-column> -->
				</el-table>
			</el-card>
		</div>

		<!-- 分页 -->
		<el-dialog style="width:70%" :title="uploadDialog.title" :visible.sync="uploadDialog.visible" append-to-body>
			<div v-loading="uploadLoading">
				<el-upload ref="upload" :limit="1" :headers="uploadData.headers"
					:action="uploadData.url + '?updateSupport=' + uploadData.updateSupport" :data="uploadData.params"
					:disabled="uploadData.isUploading" :on-progress="handleFileUploadProgress"
					:on-success="handleFileSuccess" :on-error="handleFileError" :auto-upload="false"
					accept=".xlsx, .xls" drag>
					<i class="el-icon-upload" />
					<div class="el-upload__text">
						将文件拖到此处，或
						<em>点击上传</em>
					</div>
					<div slot="tip" class="el-upload__tip">
						<el-select v-model="uploadData.params.warehouseCode" style="width: 100%" filterable clearable
							placeholder="请选择库区">
							<el-option v-for="option in options.warehouses" :key="option.id"
								:label="option.warehouseName" :value="option.id" />
						</el-select>
					</div>
					<!-- <div slot="tip" class="el-upload__tip">
						<el-link type="info" style="font-size:16px" @click="handleDownloadTemplate">下载模板</el-link>
					</div> -->

					<div slot="tip" class="el-upload__tip" style="color:red;margin: 10px 0;">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
				</el-upload>
				<div slot="footer" style="text-align: center;" class="dialog-footer">
					<el-button type="primary" @click="confirmUploadDialog">确 定</el-button>
					<el-button @click="resetUploadDialog">取 消</el-button>
				</div>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import TbWmsLocationApi from '@/api/web/TbWmsLocationApi'
	import AuthUtils from '@/utils/AuthUtils'
	import WarehouseApi from '@/api/web/TWhWarehouseApi'
	import TbWmsMaterialInLocationApi from '@/api/web/TbWmsMaterialInLocationApi'
	import TWhMaterialCheckLineApi from '@/api/web/TWhMaterialCheckLineApi'
	const defaultTbWmsLocationFormData = {
		warehouseCode: null,
		siteCode: null,
		locationNo: null,
		locationName: null,
		isActived: null,
		bay: null,
		row: null,
		tier: null,
		bin: null,
		locationType: null,
		version: null,
	}
	export default {
		name: 'TbWmsLocationList',
		data() {
			return {
				clearlyTitle: '',
				options: {
					sysYnTypeOptions: this.$constant.sysYnTypeOptions,
					warehouses: []
				},
				percentage: 23.9,
				customColors: [{
						color: '#1989fa',
						percentage: 55
					},
					{
						color: '#e6a23c',
						percentage: 60
					},
					{
						color: '#e6a23c',
						percentage: 79
					},
					{
						color: '#f56c6c',
						percentage: 80
					},
					{
						color: '#f56c6c',
						percentage: 100
					}
				],
				queryParams: {
					warehouseCode: null,
					siteCode: null,
					locationNo: null,
					locationName: null,
					isActived: null,
					bay: null,
					row: null,
					tier: null,
					bin: null,
					locationType: '轻型物品区',
					version: null,
					isValid: this.$constant.Y
				},
				page: {
					current: 1,
					pageSize: 8,
					total: 0,
					records: []
				},
				uploadDialog: {
					title: '库位批量导入',
					visible: false
				},
				uploadData: {
					headers: {
						Authorization: 'Bearer ' + AuthUtils.getToken()
					}, // 上传请求头
					url: process.env.VUE_APP_BASE_API + '/web/tbWmsLocation/importLocationData', // 上传的地址
					params: {
						warehouseCode: '' // 会员商城
					},
					isUploading: false, // 是否禁用上传
					updateSupport: 0 // 是否更新已经存在的数据
				},
				tbWmsLocationFormDialog: {
					title: '',
					visible: false
				},
				tbWmsLocationFormData: Object.assign({}, defaultTbWmsLocationFormData),
				tbWmsLocationFormRules: {
					warehouseCode: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					siteCode: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					locationNo: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					locationName: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					isActived: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					locationType: [{
						required: true,
						message: '不能为空',
						trigger: 'change'
					}],
					version: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
				},
				loading: true,
				uploadLoading: false,
				searchVisible: true,
				multipleSelection: [],
				storageTable: [],
				tableData: [],
				isSingle: true,
				isMultiple: true
			}
		},
		created() {
			this.handleQuery()
			this.loadOptions()
		},
		methods: {
			loadOptions() {
				WarehouseApi.list().then(response => {
					this.options.warehouses = response.data
				})
			},
			handleAdd() {
				this.openTbWmsLocationFormDialog()
			},
			handleRemove(row) {
				const ids = row.id || this.multipleSelection.map(item => item.id)
				this.$confirm('是否确认删除数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					return TbWmsLocationApi.remove(ids)
				}).then(() => {
					this.handleQuery()
					this.$message.success('删除成功')
				})
			},
			openUploadDialog() {
				this.resetUploadDialog()
				this.uploadDialog.visible = true
			},
			confirmUploadDialog() {
				// this.uploadLoading = true
				// this.$refs.upload.submit()
				if (this.uploadData.params.warehouseCode) {
					this.uploadLoading = true
					this.$refs.upload.submit()
				} else {
					this.$message.warning('请先选择客户')
				}
			},
			resetUploadDialog() {
				this.uploadDialog.visible = false
				this.uploadData.params.warehouseCode = '' // 会员商城
			},
			handleEdit(row) {
				const id = row.id || this.multipleSelection.map(item => item.id)[0]
				this.openTbWmsLocationFormDialog(id)
			},
			getTableData(e, a) {
				TbWmsMaterialInLocationApi.list({
					locationNo: e
				}).then(response => {
					this.tableData = response.data
					this.tableData.forEach((value, index, array) => value.count = value.quantity)
					this.clearlyTitle = '库位编号-' + a
					console.log(response.data)
				})
			},
			handleQuery() {
				this.loading = true
				/* TbWmsLocationApi.list(//{
					// LOCATION_TYPE: 'AUTO'
				  this.queryParams
				  //}
				).then(response => {
					this.storageTable = response.data
				}) */
				TbWmsLocationApi.page(this.queryParams, this.page).then(response => {
					this.page.records = response.data.records
					this.page.total = response.data.total
					this.loading = false
				}, () => {
					this.loading = false
				})
			},
			handleExport() {
				this.$confirm('是否确认导出数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					return TbWmsLocationApi.exportData(this.queryParams)
				}).then(response => {
					this.$common.download(response.msg)
				})
			},
			handleProcessCheck() {
				const rfidCodes = this.tableData.map(item => item.rfid)
				const counts = this.tableData.map(item => item.count)
				TWhMaterialCheckLineApi.processCheck(rfidCodes, counts).then(response => {
					this.$message.success('盘点成功')
				})
			},
			openTbWmsLocationFormDialog(id) {
				this.resetTbWmsLocationFormDialog()
				this.tbWmsLocationFormDialog.visible = true
				if (id) {
					this.tbWmsLocationFormDialog.title = '库区-修改'
					TbWmsLocationApi.get(id).then(response => {
						this.tbWmsLocationFormData = {
							...this.tbWmsLocationFormData,
							...response.data
						}
					})
				} else {
					this.tbWmsLocationFormDialog.title = '库区-添加'
				}
			},
			confirmTbWmsLocationFormDialog() {
				this.$refs['tbWmsLocationForm'].validate(valid => {
					if (valid) {
						if (this.tbWmsLocationFormData.id) {
							TbWmsLocationApi.edit(this.tbWmsLocationFormData).then(response => {
								this.$message.success('修改成功')
								this.tbWmsLocationFormDialog.visible = false
								this.handleQuery()
							})
						} else {
							TbWmsLocationApi.add(this.tbWmsLocationFormData).then(response => {
								this.$message.success('添加成功')
								this.tbWmsLocationFormDialog.visible = false
								this.handleQuery()
							})
						}
					}
				})
			},
			resetTbWmsLocationFormDialog() {
				this.tbWmsLocationFormDialog = {
					title: '',
					visible: false
				}
				this.tbWmsLocationFormData = Object.assign({}, defaultTbWmsLocationFormData)
				this.resetForm('tbWmsLocationForm')
			},
			handleSelectionChange(selection) {
				this.multipleSelection = selection
				this.isSingle = selection.length !== 1
				this.isMultiple = !selection.length
			},
			handleFileUploadProgress(event, file, fileList) {
				this.uploadData.isUploading = true
			},
			// 文件上传成功处理
			handleFileSuccess(response, file, fileList) {
				this.uploadLoading = false
				this.uploadDialog.visible = false
				this.uploadData.isUploading = false
				this.$refs.upload.clearFiles()
				this.$alert(response.data ? response.data : response.msg, '导入结果', {
					dangerouslyUseHTMLString: true
				})
				this.queryParams.status = null
				this.handleQuery()
			},
			// 文件上传失败处理
			handleFileError(response, file, fileList) {
				this.uploadLoading = false
			},
			resetQuery() {
				this.page.current = 1
				this.resetForm('queryForm')
				this.handleQuery()
			}
		}
	}
</script>
<style scoped>
	.box-card3 {
		width: 200px;
		background: #fafafa;
	}

	.fontSize {
		text-align: center;
		font-size: 12px;
		letter-spacing: 2px;
		padding: 2px;
	}
	.progress{
		text-align: center;
	}
</style>
